<template>

	<view class="cash-page">
		<!-- 顶部栏 -->

		<!-- 支付宝信息 -->
		<view class="alipay-box">
			<image class="alipay-logo" src="/static/alipay.jpg" mode="aspectFit" />
			<view class="alipay-info">
				<text class="alipay-account">{{userDetails.alipay_account}}</text>
				<text class="alipay-account bold">{{userDetails.alipay_account}}</text>
			</view>
			<view class="bind-btn" @click="bind">更换绑定</view>
		</view>
		<view class="alipay-record-row">
			<text class="alipay-label">立即提现</text>
			<text class="alipay-record" @click="toRecord">查看提现记录</text>
		</view>

		<!-- 输入金额 -->
		<view class="input-amount-box">
			<input class="input-amount" @blur="counts" type="number" v-model="userDetails.price" placeholder="请输入提现金额" />
		</view>
		<view class="amount-tips">
			实际到账：￥{{realMoney}} 手续费：￥{{commission}}
		</view>

		<!-- 提现规则 -->
		<view class="rule-box">
			<view class="rule-title">提现规则</view>
			<view class="rule-content">1. 提现{{mixMoney}}元起，单笔{{cashRatio?100-cashRatio:cashRatio}}%手续费</view>
			<view class="rule-content">2. 每日{{cashTime}}处理今日提现</view>
		</view>

		<!-- 提现按钮 -->
		<view class="submit-btn-box">
			<button class="submit-btn" @click="onSubmit">提现</button>
		</view>
	</view>
</template>

<script setup>
import { ref,reactive } from "vue"
	import { onLoad } from '@dcloudio/uni-app';
	import { cashMoney } from '@/api/member.js';
	import { getList } from '@/api/sysConfig.js';
	import { useUserStore } from '@/store/userStore';
	const userStore = useUserStore();

	const mixMoney = ref(0)
	const cashRatio = ref(0)
	const cashTime = ref("8:00")
	const realMoney = ref(0.00)
	const commission = ref(0.00);
	const rebat = ref(0.3);
	const userDetails = reactive({
		id:0,
		avatar: '',
		nickname: '',
		card: '',
		alipay_account: '',
		realname:'',
		price:''
	});

	onLoad((options) => {
		Object.assign(userDetails, {
			avatar: userStore.userDetails?.avatar || '',
			nickname: userStore.userDetails?.nickname || '',
			card: userStore.userDetails?.card || '',
			alipay_account: userStore.userDetails?.alipay_account || '',
			realname:userStore.userDetails?.realname || ''
		});
		console.log("Received URL parameters:", userStore.userDetails?.vip);
		if(userStore.userDetails?.vip){
			let vip = userStore.userDetails?.vip;
      let discount = vip.discount;
      cashRatio.value = typeof discount === 'string' ? parseFloat(discount) : discount;
      rebat.value = typeof discount === 'string' ? parseFloat(discount) : discount;
			console.log(typeof cashRatio.value+"--"+ typeof rebat.value)
		}
		sysConfig();
		// You can use the params to update userDetails or perform other actions
	});
	const bind = ()=>{
		let url = `/pages/user/bind/bind?avatar=${userDetails.avatar}&nickname=${userDetails.nickname}&card=${userDetails.card}&alipay_account=${userDetails.alipay_account}&realname=${userDetails.realname}`
		uni.navigateTo({
				url: url
		});
	}

	const sysConfig = async () =>{
		let result = await getList();
		console.log(result);
		mixMoney.value = result.mix_money;

		let cashTimeEntry = result.find(item => item.key === 'cash_time');
		// 获取 value 并赋值给 cashTime
		cashTime.value = cashTimeEntry ? cashTimeEntry.value : '';

		let mixMoneyEntry = result.find(item => item.key === 'mix_money');
		// 获取 value 并赋值给 cashTime
		mixMoney.value = mixMoneyEntry ? mixMoneyEntry.value : '';

		let cashRatioEntry = result.find(item => item.key === 'cash_ratio');
		// 获取 value 并赋值给 cashTime

		let cashRatioV=cashRatioEntry ? cashRatioEntry.value : 0;

		if(cashRatio.value==0) {
			cashRatio.value = cashRatioV;
			if(cashRatioV){
				rebat.value = cashRatioV;
			}else{
				rebat.value = 0;
			}
		}



	}

	function goBack() {
		uni.navigateBack();
	}
	function toRecord() {
		// 跳转到提现记录页面
		uni.navigateTo({ url: '/pages/user/cashRecord/cashRecord' });
	}

	const onSubmit = async()=>{
		let result = await cashMoney(userDetails).then(res=>{
			uni.showToast({ title: '申请成功', icon: 'success' });
			setTimeout(() => {
				goBack();
			}, 2000);
		})
	}

	const counts = ()=>{
		let price = userDetails.price;
		if (price) {

			// let  commissionPrice= Math.ceil(price * rebat.value) / 100;
			// commission.value = commissionPrice.toFixed(2);
			// realMoney.value = (price - commission.value).toFixed(2);
			let  realMoneyPrice= Math.ceil(price * rebat.value) / 100;
      realMoney.value = realMoneyPrice.toFixed(2);
			commission.value = (price - realMoney.value).toFixed(2);
		} else {
			commission.value = 0.00;
			realMoney.value = 0.00;
		}
	}
</script>

<style lang="scss" scoped>
	.cash-page {
		min-height: 100vh;
		background: #f6f7fb;
		display: flex;
		flex-direction: column;
	}

	.alipay-box {
		background: #fff;
		margin: 24rpx 0 0 0;
		padding: 24rpx 24rpx 24rpx 24rpx;
		display: flex;
		align-items: center;
		border-radius: 0 0 20rpx 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
	}
	.alipay-logo {
		width: 80rpx;
		height: 80rpx;
		border-radius: 16rpx;
		background: #4a90e2;
		margin-right: 18rpx;
	}
	.alipay-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.alipay-account {
		font-size: 24rpx;
		color: #333;
		margin-bottom: 2rpx;
	}
	.alipay-account.bold {
		font-size: 28rpx;
		color: #222;
		font-weight: bold;
	}
	.bind-btn {
		background: #4a90e2;
		color: #fff;
		font-size: 24rpx;
		border-radius: 32rpx;
		padding: 8rpx 32rpx;
		font-weight: bold;
		margin-left: 18rpx;
	}
	.alipay-record-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		padding: 0 24rpx;
		height: 70rpx;
		border-bottom: 2rpx solid #f2f2f2;
	}
	.alipay-label {
		font-size: 28rpx;
		color: #222;
		font-weight: bold;
	}
	.alipay-record {
		font-size: 24rpx;
		color: #bbb;
	}
	.input-amount-box {
		background: #f2f2f2;
		margin: 0 24rpx;
		border-radius: 16rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		padding: 0 32rpx;
		margin-top: 24rpx;
	}
	.input-amount {
		width: 100%;
		border: none;
		background: transparent;
		font-size: 28rpx;
		color: #888;
		outline: none;
	}
	.amount-tips {
		font-size: 22rpx;
		color: #888;
		margin: 12rpx 24rpx 0 24rpx;
	}
	.rule-box {
		background: #fff;
		margin: 32rpx 0 0 0;
		padding: 0 24rpx 24rpx 24rpx;
		border-radius: 0 0 20rpx 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
	}
	.rule-title {
		font-size: 26rpx;
		color: #222;
		font-weight: bold;
		margin: 24rpx 0 12rpx 0;
	}
	.rule-content {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 8rpx;
	}
	.submit-btn-box {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100vw;
		background: transparent;
		z-index: 99;
		padding-bottom: env(safe-area-inset-bottom);
	}
	.submit-btn {
		width: 100vw;
		height: 90rpx;
		background: #4a90e2;
		color: #fff;
		font-size: 32rpx;
		border-radius: 0;
		border: none;
		margin: 0;
		font-weight: bold;
	}
</style>
